<template>
    <view>
        <!-- components/couponChoosePopup/index.wxml -->
        <van-popup :show="showClone" position="bottom" :round="true" @close="onCloseFun">
            <view class="title">
                <text>选择可用优惠券</text>
                <van-icon custom-class="close_icon" class-prefix="iconfont" name="danchuangguanbi" size="28rpx" color="#999999" @tap.native="onCloseFun"></van-icon>
            </view>
            <view style="background-color: #e8e8e8; height: 1rpx"></view>
            <scroll-view scroll-y :enhanced="true" :show-scrollbar="true" style="padding: 0 34rpx; max-height: 700rpx; box-sizing: border-box">
                <view v-if="amountFilterCoupons && amountFilterCoupons.length > 0">
                    <view v-for="(coupon, index) in amountFilterCoupons" :key="index">
                        <view :class="'coupon_item ' + (coupon.enable ? '' : 'grayscale')" @tap="chooseCoupon" :data-coupon="coupon">
                            <span>
                                <van-image
                                    v-if="coupon.discountType == 0"
                                    width="116rpx"
                                    height="116rpx"
                                    src="https://cq-prd.oss-cn-hangzhou.aliyuncs.com/static/res/person/coupon_icon_1.png"
                                ></van-image>
                                <van-image
                                    v-else-if="coupon.discountType == 1"
                                    width="116rpx"
                                    height="116rpx"
                                    src="https://cq-prd.oss-cn-hangzhou.aliyuncs.com/static/res/person/coupon_icon_2.png"
                                ></van-image>
                                <van-image v-else width="116rpx" height="116rpx" src="https://cq-prd.oss-cn-hangzhou.aliyuncs.com/static/res/person/coupon_icon_3.png"></van-image>
                            </span>
                            <view style="margin: 0 24rpx; flex: 1">
                                <view class="coupon_name">{{ coupon.couponName }}</view>
                                <view class="expire_time">有效期：{{ coupon.startDate }}至{{ coupon.endDate }}</view>
                            </view>
                            <view style="display: flex; flex-direction: column; align-items: flex-end">
                                <view style="display: flex; flex-direction: row; align-items: baseline; color: #fe8104">
                                    <block v-if="coupon.discountType == 0">
                                        <view style="font-size: 24rpx">￥</view>
                                        <view style="font-size: 56rpx">{{ coupon.discountAmount / 100 }}</view>
                                    </block>
                                    <block v-else-if="coupon.discountType == 1">
                                        <view style="font-size: 56rpx">{{ coupon.discountAmount / 10 }}</view>
                                        <view style="font-size: 24rpx">折</view>
                                    </block>
                                </view>
                            </view>
                        </view>

                        <view style="background-color: #e8e8e8; height: 1rpx"></view>
                    </view>
                </view>
                <view v-else style="min-height: 240rpx"></view>
            </scroll-view>
        </van-popup>
    </view>
</template>

<script>
// components/couponChoosePopup/index.js
export default {
    data() {
        return {
            amountFilterCoupons: '',

            coupon: {
                enable: false,
                discountType: 0,
                couponName: '',
                startDate: '',
                endDate: '',
                discountAmount: 0
            },

            showClone: false
        };
    },
    mixins: [require('miniprogram-computed').behavior],
    props: {
        show: {
            type: Boolean,
            default: false
        },
        coupons: {
            type: Array,
            default: () => []
        },
        amountCent: {
            type: Number,
            default: 10000000000
        }
    },
    computed: {
        amountFilterCoupons(data) {
            if (data.coupons) {
                return data.coupons.map((item) => {
                    return {
                        ...item,
                        enable: data.amountCent > item.threshold
                    };
                });
            } else {
                return [];
            }
        }
    },
    methods: {
        onCloseFun() {
            this.setData({
                showClone: false
            });
        },
        chooseCoupon(e) {
            let coupon = e.currentTarget.dataset.coupon;
            if (coupon.enable) {
                this.$emit('chooseCoupon', {
                    detail: coupon
                });
                this.setData({
                    showClone: false
                });
            }
        }
    },
    created: function () {},
    watch: {
        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
